<template>
	<view class="container">
		<view class="panel-container">
			<!-- 面板1 -->
			<template v-if="curPanel === 0">
				<!-- 日期 -->
				<view class="date flex-between">
					<view class="li" v-for="(item, index) in date" :key="index" :class="[index == curIndex ? 'li-c' : '']" @click="chDate(index)">{{item}}</view>
				</view>
				<view class="panel">
					<view class="sales flex-between">
						<view class="lef">
							销售额
							<view class="price">￥{{prodData.subData.alipayTotalPrice}}</view>
						</view>
						<view class="rig tc" @click="curPanel = 1">切换订单</view>
					</view>
					<view class="ul flex-between">
						<view class="li">
							<view class="lef">
								全部佣金
								<view class="price">￥{{prodData.subData.totleCommission}}</view>
							</view>
							<view class="rig">
								结算佣金
								<view class="price">￥{{prodData.subData.settleCommission}}</view>
							</view>
						</view>
						<view class="li bom">
							<view class="lef">
								付款佣金
								<view class="price">￥{{prodData.subData.payCommission}}</view>
							</view>
							<view class="rig">
								失效佣金
								<view class="price">￥{{prodData.subData.invalidCommission}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<!-- 日期 -->
				<view class="date flex-between">
					<view class="li" v-for="(item, index) in date" :key="index" :class="[index == curIndex ? 'li-c' : '']" @click="chDate(index)">{{item}}</view>
				</view>
				<!-- 面板2 -->
				<view class="panel">
					<view class="sales flex-between">
						<view class="lef">
							销售额
							<view class="price">￥{{prodData.subData.alipayTotalPrice}}</view>
						</view>
						<view class="rig tc" @click="curPanel = 0">切换佣金</view>
					</view>
					<view class="ul flex-between">
						<view class="li ">
							<view class="lef">
								全部单数
								<view class="price">{{prodData.subData.orderNum}}</view>
							</view>
							<view class="rig">
								结算订单
								<view class="price">{{prodData.subData.settleOrderNum}}</view>
							</view>

						</view>
						<view class="li bom">
							<view class="lef">
								付款订单
								<view class="price">{{prodData.subData.payOrderNum}}</view>
							</view>
							<view class="rig">
								失效订单
								<view class="price">{{prodData.subData.invalidOrderNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<!-- 折线图 -->
		<view class="line">
			<!-- 切换 -->
			<view class="filter flex-between" :class="{ceil : isShowSearch}">
				<!-- 联盟账号 -->
				<view class="flex-between" @click="toPath('taobaoId')">
					<view class="text-over pid">{{filterObj.taobaoId.label}}</view>
					<text class="iconfont">&#xe618;</text>
				</view>
				<Filter @open="timeShow = true" @close="close" @filter="filter" type="time" :show="timeShow"></Filter>
				<Filter @open="lineShow = true" @filter="filter" type="line" :show="lineShow"></Filter>
				<!-- 推广位 -->
				<view class="flex-between" @click="toPath('positionId')">
					<view class="text-over pid">{{filterObj.positionId.label}}</view>
					<text class="iconfont">&#xe618;</text>
				</view>
				<Filter @open="cusOrderShow = true" @close="close" @filter="filter" type="cusOrder" :show="cusOrderShow"></Filter>
			</view>
			<!-- 图表 -->
			<canvas v-if="!timeShow && !lineShow && !cusOrderShow" canvas-id="canvasLineA" id="canvasLineA" class="charts"
			 :disable-scroll="true" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
		</view>
		<view class="srot">
			<view class="top flex-between">
				<view class="btn" :class="[curPid === 0 ? 'btn-c' : '']" @click="switchPid(0)">推广详情</view>
				<view class="btn" :class="[curPid === 1 ? 'btn-c' : '']" @click="switchPid(1)">产品排行</view>
			</view>
			<view class="cen flex-between">
				<view class="li">序号</view>
				<view class="li" v-if="curPid===0">时间</view>
				<view class="li" v-else>产品名</view>
				<template v-if="params.filterInVaildOrder === ''">
					<view class="li flex-center" @click="srot('totleCommission')">
						全部佣金
						<image v-if="params.order === 'totleCommission' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'totleCommission' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
					<view class="li flex-center" @click="srot('orderNum')">
						全部订单
						<image v-if="params.order === 'orderNum' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'orderNum' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
				</template>
				<template v-if="params.filterInVaildOrder === 1">
					<view class="li flex-center" @click="srot('validCommission')">
						有效佣金
						<image v-if="params.order === 'validCommission' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'validCommission' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
					<view class="li flex-center" @click="srot('validOrderNum')">
						有效订单
						<image v-if="params.order === 'validOrderNum' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'validOrderNum' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
				</template>
				<template v-if="params.filterInVaildOrder === 0">
					<view class="li flex-center" @click="srot('invalidCommission')">
						无效佣金
						<image v-if="params.order === 'invalidCommission' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'invalidCommission' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
					<view class="li flex-center" @click="srot('invalidOrderNum')">
						无效订单
						<image v-if="params.order === 'invalidOrderNum' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'invalidOrderNum' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
				</template>
			</view>
			<view class="bom">
				<view class="ul">
					<view class="li flex-between" v-for="(item, index) in prodData.list" :key="index">
						<view class="srot">{{index + 1}}</view>
						<view class="time text-over">{{curPid === 0 ? item.time : item.itemTitle}}</view>
						<view class="commiss">￥{{switchCommiss(item)}}</view>
						<view class="order">{{switchOrder(item)}}</view>
					</view>
				</view>
				<!-- 加载文案 -->
				<LoadMore :loading="loading" :finished="finished" :empty="empty"></LoadMore>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	var canvaLineA = null;
	import {
		dateFormat,
		formatDate,
		hesitateTime
	} from '../../utils'
	import Filter from '@/components/Filter.vue'
	import LoadMore from '@/components/LoadMore.vue'
	import uCharts from '@/components/u-charts.js';
	import {
		loading,
		loaded
	} from '@/utils/tip.js'
	export default {
		components: {
			Filter,
			LoadMore
		},
		data() {
			return {
				date: ['今天', '昨天', '最近七天', '最近30天', '本月'],
				panel: {
					top: [{
						label: '全部佣金',
						value: '123.00'
					}, {
						label: '付款佣金',
						value: '123.00'
					}],
					bom: [{
						label: '结算佣金',
						value: '123.00'
					}, {
						label: '失效佣金',
						value: '123.00'
					}]
				},
				isShowSearch: false, //吸顶
				cusOrderShow: false,
				// tbShow: false,
				timeShow: false,
				lineShow: false,
				info: null, // 商品信息
				curTab: 0, // 当前类型
				curIndex: 0, // 当前日期
				curPanel: 0, //当前面板
				curPid: 0, //  当前的底部排行
				curLine: 0, // 当前统计图类型
				// 传参
				params: {
					page: 1,
					size: 10,
					order: 'validOrderNum',
					sort: 'desc',
					startTime: '',
					endTime: '',
					timeType: 0,
					taobaoId: '',
					positionId: '',
					staffId: '',
					tkStatus: '',
					period: 0,
					filterInVaildOrder: ''
				},
				// 获取到的数据
				prodData: {
					subData: {
						alipayTotalPrice: 0,
						orderNum: 0,
						validCommission: 0,
						validOrderNum: 0,
						payCommission: 0,
						payOrderNum: 0,
						settleCommission: 0,
						settleOrderNum: 0,
						invalidCommission: 0,
						invalidOrderNum: 0,
						totleCommission: 0,
					},
					list: [],
					pagination: null
				},
				lastParam: null, //上个页面的请求参数
				loading: false,
				finished: false,
				empty: false,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				chartData: {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: '有效订单',
						data: [35, 20, 25, 37, 4, 20]
					}, {
						name: '失效订单',
						data: [70, 40, 65, 100, 44, 68]
					}]
				},
				// 过滤类型
				filterType: '',
				filterObj: {
					positionId: {
						value: '',
						label: '推广位'
					},
					taobaoId: {
						value: '',
						label: '联盟账号'
					},
					staffId: {
						value: '',
						label: '运营人'
					}
				}
			};
		},
		onLoad(options) {
			this.curTab = Number(options.curTab)
			this.info = JSON.parse(decodeURIComponent(options.info))
			this.lastParam = JSON.parse(options.lastParam)
			this.editParams()
			this.getNavTitile()
			this.getTime()
			// 折线图插件参数
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(400);
		},
		onShow() {
			this.clear()		
			let data = uni.getStorageSync(this.filterType)
			console.log('看一看', data)
			if (data) {
				this.params[this.filterType] = data.value
				this.filterObj[this.filterType] = data
			}
			
			this.getTopData()
			this.getTimeStatic()
		},
		// 上拉加载
		onReachBottom() {
			if (this.finished) return
			this.params.page++
			this.loading = true
			this.getTopData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.clear()
			this.getTopData()
		},
		methods: {
			switchOrder(item) {
				console.log('chufale')
				if (this.params.filterInVaildOrder === 1) {
					return item.validOrderNum
				} else if(this.params.filterInVaildOrder === 0) {
					return item.invalidOrderNum
				} else {
					return item.orderNum
				}
			},
			switchCommiss(item) {
				if (this.params.filterInVaildOrder === 1) {
					return item.validCommission
				} else if(this.params.filterInVaildOrder === 0) {
					return item.invalidCommission
				} else {
					return item.totleCommission
				}
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true,
						position: 'top',
						float: 'left'
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						itemCount: 10,
						labelCount: 10,
						scrollShow: false,
						scrollAlign: 'left', //滚动条初始位置
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 5,
						// format: (val) => {
						// 	return val.toFixed(2) + ''
						// }
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					},
					colors: ['#554BE2', '#FF7E3B']
				});

			},
			touchLineA(e) {
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			formatDate,
			hesitateTime,
			// 统计图数据
			getTimeStatic() {
				let params = {
					...this.params,
					order: '',
					sort: '',
					filterZeroData: 0,
					period: this.curIndex >= 2 ? 1 : 0
				}
				this.$service.order.timeStatistics(params).then((res) => {
					this.renderChart(res)
				}).catch((err) => {})
			},
			// 渲染统计图
			renderChart(res) {
				let timeArr = []
				let vailArr = []
				let invaildArr = []
				res.list.forEach((item, index) => {
					timeArr.push(item.time)
					if (this.curLine === 0) {
						vailArr.push(item.validOrderNum)
						invaildArr.push(item.invalidOrderNum)
					} else {
						vailArr.push(item.validCommission)
						invaildArr.push(item.invalidCommission)
					}
				})
				this.chartData.categories = timeArr
				this.chartData.series[0].data = vailArr
				this.chartData.series[1].data = invaildArr
				this.showLineA('canvasLineA', this.chartData)
			},
			getTopData() {
				let params = {
					...this.params,
					period: 1,
					filterZeroData: 1
				}
				loading()
				if (this.curPid === 0) {
					this.$service.order.timeStatistics(params).then((res) => {
						loaded()
						this.prodData.list = this.prodData.list.concat(res.list)
						this.prodData.pagination = res.pagination
						this.prodData.subData = res.subData
						this.loadMore(res)
					}).catch((err) => {

					})
				} else {
					this.$service.home.topProduct(params).then((res) => {
						loaded()
						this.prodData.list = this.prodData.list.concat(res.list)
						this.prodData.pagination = res.pagination
						this.prodData.subData = res.subData
						this.loadMore(res)
					})
				}
			},
			//列表加载的一些逻辑判断
			loadMore(res) {
				if (res.list.length < this.params.size) this.finished = true
				if (this.prodData.list.length === 0) this.empty = true
				this.loading = false
			},
			getTime(val) {
				this.params = {
					...this.params,
					...dateFormat(val)
				}
			},
			// 选择日期
			chDate(index) {
				this.curIndex = index
				this.getTime(index)
				this.clear()
				this.getTopData()
				this.getTimeStatic()
			},
			// 切换推广显示
			switchPid(val) {
				this.curPid = val
				this.clear()
				this.getTopData()
			},
			srot(val) {
				if (this.params.order !== val) {
					this.params.sort = ''
				}
				if (!this.params.sort) {
					this.params.sort = 'desc'
				} else if (this.params.sort === 'desc') {
					this.params.sort = 'asc'
				} else {
					this.params.sort = ''
				}
				this.params.order = val
				this.clear()
				this.getTopData()
			},
			// 清楚数据
			clear() {
				this.params.page = 1
				this.prodData.list = []
				this.loading = false
				this.finished = false
				this.empty = false
			},
			// 过滤
			filter(item, type) {
				switch (type) {
					case 'time':
						this.params.timeType = item.value
						this.timeShow = false
						break;
					case 'cusOrder':
						this.params.order = ''
						this.params.sort = ''
						this.params.filterInVaildOrder = item.value
						this.cusOrderShow = false
						break;
					case 'line':
						this.curLine = item.value
						this.switchLine()
						this.lineShow = false
						return
					case 'shade':
						this.timeShow = false
						this.cusOrderShow = false
						this.lineShow = false
						this.showLineA('canvasLineA', this.chartData)
						return
				}
				this.clear()
				this.getTopData()
				this.getTimeStatic()
			},
			getNavTitile() {
				let title = ''
				switch (this.curTab) {
					case 1:
						title = this.info.sellerShopTitle
						break;
					case 2:
						title = this.info.adzoneName
						break;
					case 3:
						title = this.info.relationId
						break;
					case 4:
						title = this.info.staffName
						break;
					case 5:
						title = this.info.label
						break;
				}
				uni.setNavigationBarTitle({
					title: title
				});
			},
			editParams() {
				switch (this.curTab) {
					case 1:
						this.params.sellerShopTitle = this.info.sellerShopTitle
						break;
					case 2:
						this.params.adzoneId = this.info.adzoneId
						this.params.positionId = this.info.positionId
						break;
					case 3:
						this.params.relationId = this.info.relationId
						break;
					case 4:
						this.params.title = this.info.staffName
						this.params.staffId = this.info.staffId
						break;
					case 5:
						if (this.lastParam.labelType === 2) {
							this.params.relationIdss = this.info.relationId.join(',')
							this.params.labelName = this.info.label
						} else {
							this.params.positionId = this.info.positionId.join(',')
						}
						break;
				}
			},
			// 切换统计图
			switchLine(val) {
				if (this.curLine === 0) {
					this.chartData.series[0].name = '有效订单'
					this.chartData.series[1].name = '失效订单'
				} else {
					this.chartData.series[0].name = '有效佣金'
					this.chartData.series[1].name = '失效佣金'
				}
				this.getTimeStatic()
			},
			toPath(val) {
				this.filterType = val
				uni.navigateTo({
					// url: `/pages/index/${val}?pid=${JSON.stringify(this.pid)}`,
					url: `/pages/common/check?type=${val}&values=${this.params[val] || 'all'}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #FAFAFA;

		// padding-bottom: 24rpx;
		.prod {
			background-color: white;
			padding: 24rpx 24rpx 24rpx 24rpx;
			margin-bottom: 12rpx;

			image {
				width: 120rpx;
				height: 120rpx;
			}

			.lef {
				padding-left: 16rpx;
				flex: 1;

				.title {
					margin-bottom: 24rpx;
				}

				.bom {
					font-size: 20rpx;
					color: #666666;

					view {
						font-size: 20rpx;

						text {
							color: $main-color;
							font-weight: bold;
						}
					}
				}
			}
		}

		.panel-container {
			background-color: white;
			padding: 0 24rpx;
			padding-bottom: 24rpx;
			margin-bottom: 12rpx;
		}

		.date {
			padding: 24rpx 0;

			.li {
				font-szie: 20rpx;
				width: 128rpx;
				height: 48rpx;
				border-radius: 180rpx;
				background-color: #FFECE5;
				color: $main-color;
				text-align: center;
				line-height: 48rpx;
			}

			.li-c {
				background-color: $main-color;
				color: white;
			}
		}

		.panel {
			width: 702rpx;
			height: 404rpx;
			border-radius: 8rpx;
			padding: 30rpx 40rpx 40rpx 40rpx;
			font-size: 20rpx;
			color: white;
			overflow: hidden;
			background-color: $main-color;

			.sales {
				.price {
					font-size: 48rpx;
					font-weight: bold;
				}

				.rig {
					width: 128rpx;
					height: 48rpx;
					border-radius: 24rpx;
					font-size: 20rpx;
					background-color: white;
					line-height: 48rpx;
					color: $main-color;
				}
			}

			.ul {
				margin-top: 52rpx;

				.li {

					// flex: 1;
					view {
						font-size: 20rpx;
					}

					.price {
						font-size: 36rpx;
						font-weight: bold;
					}

					.rig {
						margin-top: 34rpx;
					}
				}

				.bom {}
			}
		}

		.line {
			min-height: 480rpx;
			margin-bottom: 12rpx;

			.filter {
				padding: 24rpx;
				background-color: white;

				.icon {
					width: 24rpx;
					height: 24rpx;
					transition: all 0.5s;
				}

				.pid {
					max-width: 3.8rem;
				}
			}

			.ceil {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
			}

			.charts {
				width: 750rpx;
				height: 400rpx;
				background-color: #FFFFFF;
			}
		}

		.srot {

			// background-color: white;
			// margin-bottom: 24rpx;
			.top {
				background-color: white;
				padding: 24rpx 239rpx 20rpx 239rpx;

				.btn {
					width: 128rpx;
					height: 48rpx;
					border-radius: 180rpx;
					background-color: #FFECE5;
					color: $main-color;
					line-height: 48rpx;
					text-align: center;
					font-size: 28rpx;
				}

				.btn-c {
					background-color: $main-color;
					color: white;
				}
			}

			.cen {
				background-color: white;
				padding-bottom: 14rpx;

				.li {
					width: 25%;
					text-align: center;
					color: #666666;

					image {
						width: 24rpx;
						height: 24rpx;
						transition: all 1s;
					}

					.drop-c {
						transform: rotate(180deg);
					}
				}
			}

			.bom {
				min-height: 720rpx;

				.ul {
					.li {
						background-color: white;
						height: 72rpx;
						border-top: 2rpx solid #FAFAFA;

						view {
							width: 25%;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
